<template>
	<view class="cds-picker">
		<u-popup v-model="show" :mode="props.mode" :mask="props.mask" border-radius="32">
			<view class="cdsPopup-header">
				<slot name="header">
					<text class="cdsPopu-title">{{ props.title }}</text>
					<image @click="close" v-if="props.showClose" src="@/static/close-icon.png" class="closeIcon"></image>
				</slot>
			</view>
			<view class="cdsPopup-body">
				<slot name="body"></slot>
			</view>
			<view v-if="props.showFooter" class="cdsPopup-footer">
				<slot name="footer">
					<view @click="confirm" class="confirm-btn">确认</view>
				</slot>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['confirm', 'close']);

const props = defineProps({
	mode: {
		type: String,
		default: 'bottom'
	},
	title: {
		type: String,
		default: ''
	},
	showClose: {
		type: Boolean,
		default: true,
	},
	showFooter: {
		type: Boolean,
		default: true
	},
	mask: {
		type: Boolean,
		default: true
	}
});

// picker显示
const show = defineModel(false);

// 弹窗确认
const confirm = () => {
	emit('confirm');
};

// 弹窗关闭
const close = () => {
	show.value = false;
	emit('close');
};
</script>

<style lang="scss" scoped>
.cds-picker {
	.cdsPopup-header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 100rpx;
		background: linear-gradient(180deg, rgba(0, 197, 130, 0.12) 0%, rgba(0, 197, 130, 0) 100%);
		
		.cdsPopu-title {
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.closeIcon {
			position: absolute;
			top: 38rpx;
			right: 24rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.cdsPopup-body {
		
	}
	
	.cdsPopup-footer {
		display: flex;
		flex-wrap: nowrap;
		gap: 24rpx;
		justify-content: center;
		color: #fff;
		height: 190rpx;
		padding-top: 24rpx;
		
		
		.confirm-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 646rpx;
			height: 98rpx;
			font-size: 32rpx;
			border-radius: 96rpx;
			background-color: $uni-main-color;
		}
	}
}
</style>
